<!-- 数据字典 -->
<template>
    <div lass="w100" style="padding-top:10px !important">
            <el-container>
                <el-aside width="280px">
                    <el-card  class="ml5">
                        <el-input  class="mb4" v-model.trim="filterText" clearable placeholder="" />
                        <el-tree
                            v-loading="treeLoading"
                            ref="categoryTreeRef"
                            :style="`height:calc(100vh - 172px);overflow-y:auto`"
                            :data="categoryData"
                            default-expand-all
                            :filter-node-method="handleFilterNode"
                            @node-click="handleTreeNodeClick"
                        />
                    </el-card>
                </el-aside>
                <el-main class="layout-parent">
                    <vp-main-page  v-loading="tableLoading" style="padding-top:0px !important;padding-bottom: 0px !important;">
                        <template #actions>
                            <el-space>
                                <vp-btn-add  v-if="selectedNode.id"  v-auth="'systemDictionary.edit'" @click="handleAdd"/>
                                <b>{{selectedNode.label ? selectedNode.label:'&nbsp;'}}</b>
                            </el-space>
                        </template>
                        <template #table>
                            <vp-table v-loading="tableLoading" :data="tableData" stripe border   :height="`calc(100vh - 174px)`" style="width: 100%;" row-key="id">
                                <el-table-column :label="$t('item.dict')" prop="sz" show-overflow-tooltip>
                                    <template #header><vp-label zh="数据字典" en="Data Dictionary"/></template>
                                </el-table-column>
                                <el-table-column :label="$t('item.order')" prop="xc">
                                    <template #header><vp-label zh="顺序" en="Order"/></template>
                                </el-table-column>
                                <el-table-column :label="$t('item.operations')" fixed="right" width="150">
                                    <template #header>
                                        <vp-label-operations/>
                                    </template>
                                    <template #default="scope"> 
                                        <el-space>
                                            <vp-btn-edit text v-auth="'systemDictionary.edit'" @click="handleEdit(scope.row)"/>
                                            <vp-btn-del text v-auth="'systemDictionary.edit'" @click="handleDel(scope.row)"/>
                                        </el-space>
                                    </template>
                                </el-table-column>
                            </vp-table>
                        </template>
                    </vp-main-page>
                </el-main>
            </el-container>
        <EditDictionary ref="editDictionaryRef" @formSubmited="handleFormSubmited"></EditDictionary>
    </div>
</template>
<script setup lang="ts" name="systemDictionary">
import { defineAsyncComponent, defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
import request from '/@/utils/request';
import { ElMessageBox } from 'element-plus';
import { useI18n } from 'vue-i18n';
import VpMessageBox from '/@/components/vp/VpMessageBox';

    const EditDictionary = defineAsyncComponent(() => import('./component/EditDictionary.vue'));

    const filterText = ref("");
    const categoryData = ref([]);
    const selectedNode = ref({});
    const tableData = ref([]);
    const treeLoading = ref(false);
    const tableLoading = ref(false);

    const categoryTreeRef = ref();
    //树节点过滤事件
    const handleFilterNode = (value: any, data: any) => {
        if (!value)
            return true;
        return data.label.indexOf(value) !== -1;
    };
    watch(() => filterText.value, (newVal, oldVal) => {
        categoryTreeRef.value.filter(newVal);
    });
    const loadCategoryTree = () => {
        treeLoading.value = true;
        request.get("/system/dict/category/tree").then((res) => {
            categoryData.value = res?.data || [];
        }).finally(() => treeLoading.value = false);
    };
    onMounted(() => {
        loadCategoryTree();
    });
    const handleTreeNodeClick = (row: any, node: any) => {
        if(row.type === '2'){
            selectedNode.value = row;
            loadTableData();
        }
    };

    const loadTableData = ()=>{
        tableLoading.value = true;
        request.get(`/system/dict/items/${selectedNode.value.id}`).then((res)=>{
            tableData.value = res?.data||[];
        }).finally(()=>tableLoading.value=false);
    }

    const editDictionaryRef = ref();
    const handleAdd = () => {
        editDictionaryRef.value.handleOpen('add', selectedNode.value.id);
    };

    const handleFormSubmited = ()=>{
        loadTableData();
    }

    const handleEdit = (row: any)=>{
        editDictionaryRef.value.handleOpen('edit', selectedNode.value.id, row);
    }

    const handleDel = (row: any)=>{
        VpMessageBox.confirmDelete().then(()=>{
            request.delete(`/system/dict/item/${row.id}`).then(res => {
                loadTableData();
            })
		});
    }

    const handleReset = ()=>{
        VpMessageBox.confirm({
			zh: '确定要重置吗？',
			en: 'Are you sure you want to reset?',
		},{
			zh: '重置',
			en: 'Reset',
		},{
			type: 'warning',
		}).then(()=>{
            request.post(`/system/dict/reset/${selectedNode.value.id}`).then(res => {
                loadTableData();
            })
		});
    }

</script>